<template>
    <div class="markDtlContent">
        <ul class="markDtlGruop">
            <li class="markDtlCell">
                <div class="markDtl_l">检查编号</div>
                <div class="markDtl_r">{{checkList.No}}</div>
            </li>
            <li class="markDtlCell">
                <div class="markDtl_l">被检查单位</div>
                <div class="markDtl_r">{{checkList.projectName}}</div>
            </li>
            <li class="markDtlCell">
                <div class="markDtl_l">检查类型</div>
                <div class="markDtl_r">{{checkList.checkType}}</div>
            </li>
            <li class="markDtlCell">
                <div class="markDtl_l">检查时间</div>
                <div class="markDtl_r">{{checkList.checkTime}}</div>
            </li>
            <li class="markDtlCell">
                <div class="markDtl_l">检查区域</div>
                <div class="markDtl_r">{{checkList.checkArea}}</div>
            </li>
            <li class="markDtlCell">
                <div class="markDtl_l">检查内容</div>
                <div class="markDtl_r">{{checkList.checkContent}}</div>
            </li>
            <li class="markDtlCell">
                <div class="markDtl_l">检查重点</div>
                <div class="markDtl_r">{{checkList.checkImportant}}</div>
            </li>
        </ul>
        <div class="membersBox">
            <h4 class="membersHead">检查组成员及分工</h4>
            <div class="membersSection clear">
                <div class="membersSection_l fl">检查组长</div>
                <div class="membersSection_r fr">{{checkList.checkGroupLeaderName}}</div>
            </div>
            <div class="membersSection2 clear"
                v-for="(item,index) in checkList.checkMemberList"
                :key="index">
                <div class="membersSection2_l fl">
                    <p>
                        <div class="markDtlCell">
                            <div class="markDtl_l">成员{{index+1}}</div>
                            <div class="markDtl_r">{{item.memberName}}</div>
                        </div>
                    </p>
                    <p>
                        <div class="markDtlCell">
                            <div class="markDtl_l">分工</div>
                            <div class="markDtl_r">{{item.memberWork}}</div>
                        </div>
                    </p>
                </div>
            </div>
            <div class="markSubmit"><button class="markSubmitBtn" @click="startMark">开始评分</button></div>
        </div>
        <myMenu></myMenu>
    </div>

</template>

<script>
import myMenu from '@/commonComponents/menu'
export default {
  name: 'markDetail',
  data () {
        return {
            userInfo: {}, // 用户信息
            checkList: {}, // 检查列表
            safeCheckId: this.$route.query.CheckWorkId// 检查id
        }
 },
  components: {
     myMenu
  },
  created () {
      this.$vux.loading.show({
            text: 'Loading'
        })
      this.userInfo = JSON.parse(localStorage.getItem('userInfo'))
      this.getData()
  },
  methods: {
      // 获取列表数据
      getData () {
            var that = this
            var params = {
                'allowPaging': true,
                'business': 'getSafeCheckDetail',
                'data': {
                'safeCheckIdItem': this.safeCheckId
                },
                'pageIndex': 0,
                'pageSize': 20,
                'tokenId': '001',
                'userId': this.userInfo.userid
            }
        this.$axiosAjax.getConfigJson(params)
        .then((res) => {
            // console.log(res)
            if (res.data.code == 0) {
                that.checkList = res.data.data
            } else {
                this.$vux.toast.text(res.data.info)
            }
        }).catch(() => {

            }).finally(() => {
                 this.$vux.loading.hide()
            })
      },
      // 开始评分
      startMark () {
          this.$store.state.checkGroupLeader = this.checkList.checkGroupLeaderName
          this.$store.state.checkId = this.safeCheckId
          this.$router.push('/marks')
      }
  }
}
</script>

<style scoped>
.markDtlGruop{
    padding-left: 20px;
}
.markDtlCell{
    display: flex;
    display: -webkit-flex;
    justify-content: space-between;
    vertical-align: middle;
    line-height: 35px;
    font-size: 13px;
    padding: 10px 20px 10px 0;
    border-bottom: 1px solid #d9d9d9;
}
.markDtlCell:last-child{
    border: 0;
}
.markDtl_l{
    white-space: nowrap;
    margin-right: 20px;
    color: #333;
    font-size: 14px;
}
.markDtl_r{
    color: #999;
    font-size: 14px;
}
.membersBox{
    border-top: 10px solid #ebeef2;
    padding-left: 20px;
}
.membersHead{
    height: 45px;
    line-height: 45px;
    color: #2269ff;
    font-size: 15px;
    border-bottom: 1px solid #ebeff4;
}
.membersSection{
    height: 55px;
    line-height: 55px;
    font-size: 13px;
    padding-right: 20px;
    border-bottom: 1px solid #ebeff4;
}
.membersSection_r{
    color: #999;
    font-size: 14px;
}
.membersSection2{
    line-height: 30px;
    border-bottom: 1px solid #ebeff4;
    font-size: 14px;
}
.membersSection2_l {
    width: 100%;
}
.membersSection2_r p{
    color: #666;
    padding-right: 20px;
    text-align: right;
}
.membersSection2 .markDtlCell{
    border-bottom: 0;
}
.markSubmit {
   margin-top: 33px;
   margin-bottom: 29px;
}
.markSubmitBtn{
    display: block;
    width: 200px;
    height: 40px;
    background: #2269ff;
    border-radius: 20px;
    color: #fff;
    font-size: 15px;
    margin: 0 auto;
}
.membersSection_l{
    font-size: 14px;
    color: #333;
}
</style>
<style>
.markDtlContent .weui-cells{
    margin-top: 0;
}
.markDtlContent .vux-no-group-title{
    margin-top: 0;
}
.markDtlContent .weui-cells:before,.markContent .weui-cells:after{
    display: none;
}
.markDtlContent .markCell:last-child::after{
    content: " ";
    position: absolute;
    left: 0;
    bottom: 0;
    right: 0;
    height: 1px;
    border-top: 1px solid #d9d9d9;
    color: #d9d9d9;
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
    -webkit-transform: scaleY(.5);
    transform: scaleY(.5);
    left: 4vw;
}
.markDtlContent .weui-cell__ft{
    color: #666;
}
</style>
